<template>
  <div>
    <h3 v-bind:key="index" v-for="(value, index) in [1, 2, 3]">
      {{ value }}
    </h3>
    <!-- 选项卡--v-for遍历的，
    点击任意的选项卡，让当前选项卡的按钮高亮 -->
    <div class="tabs">
      <button
        v-bind:xiefucheng="'值'"
        v-bind:class="[{ 'btn-default': true }, { active: active === index }]"
        v-on:click="active = index"
        v-for="(value, index) in tabs"
        v-bind:key="index"
      >
        {{ value }}
      </button>
    </div>

    <div>
      <!-- active:0, index:0 -->
      <h2
        v-show="active === index"
        v-for="(value, index) in pans"
        v-bind:key="index"
      >
        {{ value }}
      </h2>
    </div>
    <!-- 写class绑定和style绑定 -->
    <button v-bind:class="[{ myClass: true }, { class2: true }]">
      绑定多个类名
    </button>
    <h3 v-bind:style="{ color: 'red', fontSize: '20px' }">style样式</h3>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0, // 激活样式的标识
      tabs: ["首页", "新闻", "产品"],
      pans: ["欢迎来到首页", "今日新闻", "我是产品"],
    };
  },
};
</script>

<style>
.btn-default {
  margin: 0 10px;
  background: green;
  border: none;
}
.btn-default.active {
  background: red;
}
</style>
